<template>
	<view class="content">
		<view class="" style="width: 100vw; height: 280rpx;">
			<image src="https://w-jinxiao.oss-cn-chengdu.aliyuncs.com/20210322/灌高图 拷贝 2.png" mode="aspectFill"
				style="width: 100vw; height: 100%;"></image>
		</view>

		<view class="bgc-text">
			购买机油，赠送安装服务和服务费
		</view>

		<view class="head padding border-title">
			<view class="pos " @click="jump1">
				<text class="text-bold">位置</text>
				<!-- <image src="../../static/xia.png" v-if="show == 1" class="margin-left-xs" mode=""></image> -->
				<image src="../../static/xiaa.png" class="margin-left-xs" mode=""></image>
			</view>

			<view class="distance text-bold " @click="isPos(2)">
				<text class="text-bold">距离</text>
				<text class="cuIcon-unfold margin-left-xs" v-if="show"></text>
				<text class="cuIcon-fold margin-left-xs text-red" v-else></text>
			</view>
		</view>

		<view class="list padding align-center flex align-center" v-for="(item, index) in data" :key="index">
			<view class="left" @click="dianji(item)">
				<image :src="'http://jiyou.qianjiwl.xyz' + item.image" mode="aspectFill" class="r"
					style="border-radius: 10rpx;"></image>
			</view>
			<view class="right margin-left" style="width: 356rpx;" @click="dianji(item)">
				<view class="text1 text-bold">
					<text class="text-bold">{{ item.name }}</text>
				</view>
				<view class="" style="margin-top: 24rpx;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;">
					<text class="cuIcon-location" style="color: #F1C177;margin-right: 20rpx;"></text>
					<text class="text_a " style="font-size: 26rpx; ">{{ item.address }}</text>
				</view>
				<view class="juli ">
					<text>距您 {{ item.distance }}Km</text>
				</view>
			</view>
			<view class="text-bgc" @click="dingwei(item)">
				<image class="bgc-imag" src="../../static/dh.png" mode=""></image>
				<view class="">
					<text>到这去</text>
				</view>
			</view>

		</view>
	</view>
	</view>
</template>

<script>
	// var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
	// var qqmapsdk;

	// import Map from '@/js_sdk/ms-openMap/openMap.js'
	// Map.openMap(latitude, longitude, name, coord_type)
	import qqmapsdk from '@/common/qqmap-wx-jssdk1.1/qqmap-wx-jssdk.min.js';

	export default {
		data() {
			return {
				show: false,
				data: [],
				longitude: '',
				latitude: '',
				juli: '',
				city: '请选择地址',
				order_id: '',
				navCity: '',
				platform: '',
				isVisible: ''
			};
		},
		onLoad(e) {
			this.order_id = e.id;
			var _this = this;
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					_this.longitude = res.longitude;
					_this.latitude = res.latitude;
					_this.my_card(this.juli, res.longitude, res.latitude);
				},
			});
		},
		onShow() {
			// uni.getLocation({
			//     type: 'wgs84',
			//     success: function (res) {
			//         console.log('当前位置的经度：' + res.longitude);
			//         console.log('当前位置的纬度：' + res.latitude);
			//     }
			// });
			// this.navCity && console.log('this.navCity: ', this.navCity);
			if (this.navCity) {
				this.$tools.toast(this.navCity);
				this.my_card()
			}

			this.isPos(2)

			this.platform = uni.getStorageSync('platform')

		},
		methods: {
			async jump1() {
				uni.navigateTo({
					url: 'selectCity',
				});
			},

			viewMapLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						console.log('222', res);
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							success: function() {
								console.log('success');
							},
							fail: function(res) {
								console.log(res)
							}
						});
					}
				});
			},


			dianji(i) {
				uni.setStorageSync("center", i)
				uni.navigateTo({
					url: '/pages/order/selInfo'
				})

			},

			dingwei(i) {
				// #ifdef APP-PLUS
				this.openMap(i.latitude, i.longitude, i.address)
				// #endif
			},



			// #ifdef APP-PLUS
			openMap(latitude, longitude, name) {
				let url = "";
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url =
									`androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
			},
			// #endif




			isPos(e) {
				this.show = !this.show;
				if (this.show) {
					this.my_card('asc');
				} else {

					this.my_card('desc');
				}
			},

			async my_card(juli = 'asc') {
				const res = await this.$api('fuwushanglist', {
					juli,
					longitude: this.longitude,
					latitude: this.latitude,
					city: this.navCity
				});
				this.data = res.msg.data;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f9f9f9;
		width: 100vw;

		.bgc-text {
			width: 100%;
			height: 74rpx;
			line-height: 74rpx;
			padding-left: 31rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #343434;
			font-size: 30rpx;
			background-color: #F0F0F0;
		}

		.head {
			position: sticky;
			top: 0;
			display: flex;
			justify-content: space-around;
			border-bottom: 2rpx solid #f5f5f5;

			.pos,
			.distance {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				// #EEC581

				image {
					width: 30rpx;
					height: 16rpx;
				}
			}
		}

		.list {
			display: flex;
			border-bottom: 10rpx solid #f5f5f5;

			.left {
				image {
					width: 160rpx;
					height: 160rpx;
				}
			}
			
			.text-bgc {
				width: 80rpx;
				height: 80rpx;
				font-size: 20rpx;
				text-align: center;
				margin-left: 63rpx;
				
				.bgc-imag {
					width: 29rpx;
					height: 29rpx;
					margin-bottom: 8rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: column;

				.text1 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 490rpx;
					height: 44rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 500;

					color: #333333;

					.sel {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 116rpx;
						height: 44rpx;
						background: #eec581;
						border-radius: 22rpx;

						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
					}
				}

				.text_a {
					height: 27rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #717171;
					margin-top: 30rpx;

				}

				.juli {
					display: flex;
					justify-content: space-between;
					width: 100%;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-top: 20rpx;

					image {
						vertical-align: middle;
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
	}
</style>
